<!-- Credit : https://plus.google.com/108949996304093815163/about -->
<!-- Modified by : https://plus.google.com/u/0/+RianNurherdian/about -->
<!DOCTYPE html>
<html dir='ltr'>
<head>
<link href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<meta charset='utf-8'>
<title>HTML & CSS Minifier</title>
<link href='http://triecilix.blogspot.com/favicon.ico' rel='shortcut icon'>
<style type='text/css'>
*{margin:0;padding:0}
body{background-color:white;text-align:center;padding:50px 50px}
h1{color:#02C7FD;font-size:25px;font-family:arial,sans-serif;}
textarea{display:block;text-align:left;width:98%;height:250px;border:2px solid #02C7FD;background-color:#FAFAFA;font:normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;color:#333;margin:10px auto;padding:5px;}
.tri_button{display: inline-block; text-decoration: none; outline: 0; cursor: url(http://lh6.googleusercontent.com/-CInr4otnlmc/U_HoJX93zpI/AAAAAAAAFoA/xYYTFIUHAUk/h120/cursor-hover.png),progress; font: 700 12px/1em HelveticaNeue,Arial,sans-serif; padding: 8px 11px; color: #000; text-shadow: 0 1px 0 #fff; background: #02C7FD; border: 1px solid #028BB1; border-color: #028BB1 #01617B #014456; border-radius: 4px; box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb;}
.tri_button:focus,.tri_button:hover{color: #fff; background: #3cb0fd; background: -webkit-gradient(linear,left top,left bottom,from(#3cb0fd),to(#3498db)); background: -moz-linear-gradient(top,#3cb0fd,#3498db); border-color: #ccc; box-shadow: 0 1px 2px #3cb0fd,inset 0 1px 0 #3498db;}
.tri_button:active{ position: relative; top: 1px; color: #fff; background: #028BB1; background: -webkit-gradient(linear,left top,left bottom,from(#01617B),to(#014456)); background: -moz-linear-gradient(top,#01617B,#014456); border-color: #c6c6c6; box-shadow: 0 1px 0 #01617B,inset 0 0 5px #014456;}
.tri_button.rounded{padding:8px 15px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px}
button.tri_button,input.tri_button{*width:auto;*overflow:visible}
.tri_button img{border:none;vertical-align:bottom}
.tri_button.small{padding:5px 11px;font-size:11px;font-weight:400;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.tri_button.small.rounded{-webkit-border-radius:11px;-moz-border-radius:11px;border-radius:11px}
.tri_button.large{padding:12px 15px;font-size:20px;font-weight:400;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.tri_button.large.rounded{padding:12px 22px;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px}
</style>
</head>
<body>
<h1 style="margin-top:-30px;padding-top:0px;">HTML & CSS Minifier</h1>
<textarea id='ta' spellcheck='false'></textarea>
<br/>
<button id='bt' class="tri_button large rounded" style='text-align:center;'><i class="icon-ok icon-large"></i> Minify !</button>
<script type='text/javascript'>
(function(){var ta=document.getElementById('ta'),bt=document.getElementById('bt');function compress(){var v=ta.value;v=v.replace(/(>)?\s+/g,"$1 ");v=v.replace(/([\t\n\s\r]+)</g,"<");ta.value=v;ta.focus();ta.select()}bt.onclick=compress})();
</script>
</body>
</html>